<template>
  <div class="logo">
    <p class="tit14">LOGO</p>
    <div @click="copyClick" class="picture_button clickdiv">
      <img :src="img.xinjian" alt="" />
      <span>复制LOGO</span>
    </div>

    <div class="picture_range">
      <p class="picture_range_tit">不透明度</p>
      <div class="">{{ rangeV + "%" }}</div>
    </div>
    <input
      type="range"
      min="0"
      max="1"
      step="0.01"
      ref="range"
      @input="rangeInput()"
      :style="{ backgroundSize: rangeCSS }"
      v-model.number="logotool.opacity"
      @mousedown="rangeInputdragstart"
      @mouseup="rangeInputdragend"
    />
    <div class="picture_tool">
      <div
        class="picture_tools"
        v-for="(v, i) in logoTool"
        :key="i"
        :style="{ background: v.select ? ' #d4d4d4' : '#fff' }"
        @click="picturetoolsClick(i)"
      >
        <el-tooltip
          class="item"
          popper-class="tooltip"
          effect="dark"
          :content="v.text"
          placement="bottom"
        >
          <img :src="v.img" alt="" />
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import mixin from "@/utils/mixin";
import { mapState } from "vuex";

export default {
  mixins: [mixin],
  data() {
    return {
      //滑动条
      rangeV: "",
      rangeCSS: "",
      //锁&删除
      logoTool: [
        { img: require("@/assets/img/key.png"), select: false, text: "上锁" },
        { img: require("@/assets/img/del.png"), select: false, text: "删除" },
      ],
    };
  },
  computed: {
    ...mapState("templateStage", [
      "modifyele",
      "logotool",
      "listNote",
      "listImg",
      "listEllipse",
      "listlogo",
      "historylist",
    ]),
  },
  methods: {
    rangeInputdragstart() {
      if (this.historylist.length == 0) this.$emit("deductchild");
    },
    rangeInputdragend() {
      this.$emit("deductchild");
    },
    copyClick() {
      this.$emit("copy");
    },
    //滑动条-滑动
    rangeInput() {
      let { opacity } = this.logotool;
      opacity = opacity * 100;
      this.rangeCSS = opacity + "% 100%";
      this.rangeV = parseInt(opacity);
    },
    //是否上锁
    draggabletool() {
      if (this.logotool.draggable == false) this.logoTool[0].select = true;
      else this.logoTool[0].select = false;
    },
    picturetoolsClick(i) {
      if (this.historylist.length == 0) this.$emit("deductchild");
      let { select } = this.logoTool[i];
      this.logoTool[i].select = !select;
      if (i == 0) {
        if (this.logoTool[i].select) {
          this.$emit("nonechild");
          this.$store.commit("templateStage/LOGOADDKEYELE", this.modifyele);
          this.$emit("loadele", this.modifyele);
          this.$emit("addtrans", this.modifyele);
        } else {
          this.$store.commit("templateStage/LOGODELKEYELE", this.modifyele);
          this.$emit("addtrans", this.modifyele);
          this.$emit("loadele", this.modifyele);
        }
      } else if (i == 1) {
        if (this.logoTool[i].select) {
          this.listlogo.forEach((v, index) => {
            if (v.config.name == this.modifyele) {
              this.$store.commit("templateStage/LOGODELLISTIMG", index);
              this.$emit("delchild", false);
            }
          });
        }
      }
      this.$emit("deductchild");
    },
  },
  created() {
    this.rangeInput();
    this.draggabletool();
  },
  beforeUpdate() {
    this.rangeInput();
    this.draggabletool();
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/styles/frame.less";
.logo {
  padding: 0 20px;
  color: #2b2b2b;
  & > p {
    margin-bottom: 22px;
    font-size: 14px;
  }
  .picture_range {
    // font-size:14px ;
    margin-top: 20px;
    .divAJ();
    .picture_range_tit {
      font-size: 14px;
    }
    div {
      width: 60px;
      height: 26px;
      border-radius: 2px;
      background-color: #f6f6f6;
      border: 1px solid #e0e0e0;
      .cen();
    }
  }
  .picture_tool {
    margin-top: 8px;
    .divAJ();
    .picture_tools {
      width: 28px;
      height: 28px;
      border-radius: 4px;
      .cen();
    }
  }
}
</style>